<template>
  <div>
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-row>
        <el-col :span="22">
          <el-form-item label="二级机构" prop="departmentOrgId"  class="item">
            <span>{{form.departmentOrgName}}</span>
          </el-form-item>
        </el-col>
    </el-row>
      <el-row>
        <el-col :span="22">
          <el-form-item label="所属专业类" prop="professionalCategory"  class="item">
            <span>{{professionalCategoryFormat(form.professionalCategory)}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="负责人姓名" class="item" >
           <span>{{form.projectLeader}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="负责人职称" class="item" >
           <span>{{form.ownerTitle}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="负责人电话" class="item" >
           <span>{{form.contactPhone}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="负责人邮箱" class="item" >
           <span>{{form.ownerEmail}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="联系人姓名" class="item" >
           <span>{{form.projectContactLeader}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="联系人职称" class="item" >
           <span>{{form.projectContactTitle}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="联系人电话" class="item" >
           <span>{{form.projectContactPhone}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="联系人邮箱" class="item" >
           <span>{{form.projectContactEmail}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="合作企业" class="item" >
           <span>{{form.cooperativeEnterprise}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="网址链接" class="item" >
           <span>{{form.urlLink}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="22">
          <el-form-item label="选题要求" class="item" >
           <span>{{selectionRequirementsFormat(form.selectionRequirements)}}</span>
          </el-form-item>
        </el-col>
      </el-row>
        <el-row v-if="form.selectionRequirements=='0'">
          <el-col :span="22">
            <el-form-item label="选题要求描述" class="item" >
             <span>{{form.selectionRequirementsDesc}}</span>
            </el-form-item>
          </el-col>
        </el-row>
    </el-form>
  </div>
</template>
<script>
import {searchEmployee} from "@/api/labdata/employee";
import {treeselect } from "@/api/labdata/orgnization";
import Treeselect from "@riophae/vue-treeselect";
import { getOrgName} from "@/api/labdata/orgnization";
  export default {
    name: "ProjectTeachingCultivationDetail",
    components:{Treeselect},
    data() {
      return {
        // 所属专业分类
        professionalCategoryOptions: [],
         //选题要求
      selectionRequirementsOptions: [],
      //部门列表
      deptList:[],
          // 部门树选项
       deptOptions: [],
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          projectOwnerId: [
          { required: true, message: "工(学)号不能为空", trigger: "blur" }
        ],
        ownerPhone: [
          { required: true, message: "联系电话不能为空", trigger: "blur" }
        ],
        siteLocation: [
          { required: true, message: "实验室场地位置不能为空", trigger: "blur" }
        ],
        ownerEmail: [
         { required: true, message: '请输入邮箱地址', trigger: 'blur' },
         { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
        ]

        }
      };
    },
    props:{
      teachingCultivation:Object,
    },
    created() {
      this.getDicts("majorOpt").then(response => {
        this.professionalCategoryOptions = response.data;
      });

      this.getDicts("selection_requirements").then(response => {
      this.selectionRequirementsOptions = response.data;
    });
      if(this.teachingCultivation){
        this.form = this.teachingCultivation;
        this.searchUser();
        this.getDeptName();
        this.searchContactUser();
      }else{
        this.form  = {};
      }
    },
    methods: {
      getTeachingCultivation(){
        return this.form;
      },
      getDeptName(){
        getOrgName(this.form.departmentOrgId).then(response=>{
          this.form.departmentOrgName = response.msg;
          this.$forceUpdate();
        });
      },
      // 输入工号搜索
      searchUser(){
        if(!this.form.projectOwnerId){
          this.form.projectLeader = null;
          this.form.ownerTitle = null;
          return;
        }
         searchEmployee(this.form.projectOwnerId).then(response=>{
           let searchResult = response.data;
           if(searchResult){
             this.form.projectLeader = searchResult.nickName;
             this.form.ownerTitle =searchResult.title
           }else{
             this.form.projectLeader = null;
             this.form.ownerTitle = null;
           }
           //强制刷新
           this.$forceUpdate();
          });
      },

      // 输入联系人工号搜索
      searchContactUser(){
        if(!this.form.projectContactId){
          this.form.projectContactLeader = null;
          this.form.projectContactTitle = null;
          return;
        }
         searchEmployee(this.form.projectContactId).then(response=>{
           let searchResult = response.data;
           if(searchResult){
             this.form.projectContactLeader = searchResult.nickName;
             this.form.projectContactTitle =searchResult.title
           }else{
             this.form.projectContactLeader = null;
             this.form.projectContactTitle = null;
           }
           //强制刷新
           this.$forceUpdate();
          });
      },

       /** 查询部门下拉树结构 */
       getTreeselect() {
        treeselect().then(response => {
          this.deptOptions = response.data;
        });
      },
      // 所在部门字典翻译
     departmentOrgIdFormat(value) {
       var  datas = this.deptList
        for(let key in datas){
            if(datas[key].orgId == value){
                return datas[key].orgName;
            }
        }
        return "";
     },

     // 选题要求翻译
     selectionRequirementsFormat(value) {
        var  datas = this.selectionRequirementsOptions
        for(let key in datas){
            if(datas[key].dictValue == value){
                return datas[key].dictLabel;
            }
        }
        return "";
     },
     // 所属专业翻译
     professionalCategoryFormat(value) {
        var  datas = this.professionalCategoryOptions
        for(let key in datas){
            if(datas[key].dictValue == value){
                return datas[key].dictLabel;
            }
        }
        return "";
     },
    }

  };
</script>
<style type="text/css" scoped>
  .form_long {
    width: 505px;
  }

  .form_short {
    width: 200px;
  }

  .el-button.active {
    text-decoration: underline;
    color: #0000ee;
  }

  .hintItem {
    line-height: 30px;
  }

  .purchase_s_view {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .table_button {
    margin-bottom: 10px;
    width: 100%;
    text-align: center;
    line-height: 20px;
    border-bottom: 1px solid #f6f5f5;
    color: #43bef8;
    cursor: pointer;
    border: 0;
  }
  /deep/ .el-form-item {
    margin-bottom: 5px;
  }
</style>
